<template>
	<view class="shop-item" @click="goDetail">
		<view class="shop-title flexr align-center">
			<view class="shop-name">{{ shop.headofficeName }}</view>
			<view class="shop-dis">{{ shop.distance }}km</view>
		</view>
		<view class="divider2"/>
		<view class="img-txt flexr">
			<img class="icon" :src="BuildImageUrl(shop.logo)" mode="aspectFill"/>
			<view class="flexc">
				<view class="shop-addr">
					{{ shop.address }}
				</view>
				<view class="shop-time">
					营业时间：{{ shop.businessHoursStr }}
				</view>
				<view class="flexr">
					<view class="tag-item flexr align-center justify-center">
						{{ shop.businessStatus }}
					</view>
					<view v-if="shop.isCanAppointment" class="tag-item flexr align-center justify-center">
						可预约
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { BuildImageUrl } from '@/api/api';
const props = defineProps({
	shop: Object,
})
function goDetail() {
	const storesId = props.shop.storesId
	uni.navigateTo({
		url: `/subpages/appointment/shopDetail?storesId=${storesId}`
	})
}
</script>

<style lang="scss">
.shop-item {
	background-color: white;
	border-radius: 20rpx;
	margin-top: 18rpx;
	.shop-title {
		height: 86rpx;
		justify-content: space-between;
		padding: 0 20rpx;
		.shop-name {
			font-size: 32rpx;
			color: $text-color1;
		}
		.shop-dis {
			font-size: 28rpx;
			color: $text-color2;
		}
	}
	.img-txt {
		padding: 26rpx;
		.icon {
			height: 160rpx;
			width: 160rpx;
			min-width: 160rpx;
			min-height: 160rpx;
			border-radius: 15rpx;
			overflow: hidden;
			margin-right: 22rpx;
		}
		.shop-addr {
			color: $text-color3;
			font-size: 26rpx;
		}
		.shop-time {
			color: $text-color3;
			font-size: 26rpx;
			margin-top: 10rpx;
			margin-bottom: 10rpx;
		}
		.tag-item {
			height: 36rpx;
			padding: 0 10rpx;
			color: $text-color4;
			background-color: $tag-bg;
			font-size: 20rpx;
			border-radius: 8rpx;
		}
		.tag-item + .tag-item {
			margin-left: 8rpx;
		}
	}
}
</style>
